{% extends 'base.html' %}

{% block title %}碳排放系数分类管理{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>碳排放系数分类管理</h1>
    <a href="{{ url_for('coefficient_category.add_category') }}" class="btn btn-primary">添加新分类</a>
</div>

<!-- 搜索表单移到这里 -->
<div class="search-container mb-4">
    <form method="get" action="/coefficients/categories">
        <div class="row mb-3">
            <div class="col-md-10">
                <input type="text" name="search" placeholder="搜索分类名称..." value="{{ search_query }}" class="form-control">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-secondary w-100">搜索</button>
            </div>
        </div>
        {% if search_query %}
            <a href="/coefficients/categories" class="btn btn-outline-secondary ms-2">清除</a>
        {% endif %}
    </form>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>分类名称</th>
                        <th>层级</th>
                        <th>父级ID</th>  <!-- 新增父级ID列 -->
                        <th>子分类数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for category in categories %}
                    <tr>
                        <td>{{ category.id }}</td>
                        <td>{{ '　' * (category.level - 1) }}|-- {{ category.name }}</td>
                        <td>{{ category.level }}</td>
                        <td>{{ category.parent_id if category.parent_id != 0 else '无' }}</td>  <!-- 显示父级ID，顶级分类显示"无" -->
                        <td>{{ category.child_count }}</td>
                        <td>
                            <a href="{{ url_for('coefficient_category.edit_category', id=category.id) }}" class="btn btn-sm btn-primary">编辑</a>
                            <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ category.id }}">删除</button>

                            <!-- 删除确认模态框 -->
                            <div class="modal fade" id="deleteModal{{ category.id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">确认删除</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>确定要删除分类 <strong>{{ category.name }}</strong> 吗？</p>
                                            {% if category.child_count > 0 %}
                                            <div class="alert alert-warning">此分类下有 {{ category.child_count }} 个子分类，删除后将一并删除所有子分类</div>
                                            {% endif %}
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                            <form action="{{ url_for('coefficient_category.delete_category', id=category.id) }}" method="post">
                                                <button type="submit" class="btn btn-danger">删除</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

<!-- 原有分类列表代码保持不变 -->
<table class="category-table">
    <!-- ... 现有表格内容 ... -->
</table>